<template>
  <div class="buttom">
    <!-- 播放条 -->
    <div class="top">
      <div class="slice">
        <el-slider v-model="sliceLength"></el-slider>
      </div>
    </div>
    <div class="bott">

      <div class="left">
        <div class="img">
          <img src="@/assets/logo.png" alt="" v-if="playPlace==1">
          <img :src="playdestily.al.picUrl" alt="" v-else>
        </div>
        <div class="sinng">
          <div class="gename" v-if="playPlace==1">歌手-歌名</div>
          <div class="gename" v-else>{{playdestily.ar[0].name}}-{{playdestily.name}}</div>
          <div class="time" v-if="playPlace==1">00:00/00:00</div>
          <div class="time" v-else>{{playdestily.m.br|format}}</div>
          <!-- <div class="time" v-if="playPlace==1">00:00/00:00</div> -->
        </div>
        <!-- //播放器 -->
        <audio :src="playPlace" v-if="playPlace!=1" autoplay ref="abc"></audio>
      </div>


      <!-- 中间按钮 -->
      <div class="content">
        <div class="div"><i class="el-icon-caret-left"></i></div>
        <div class="playbutton" v-if="data1">
          <div class="div" v-if="playPlace==1"><i class="el-icon-video-pause"></i></div>
          <div class="div" v-else><i class="el-icon-video-play" @click="playend"></i></div>
        </div>
        <div class="playbutton" v-else>
          <div class="div"><i class="el-icon-video-pause" @click="playstart"></i></div>

        </div>
        <div class="div"><i class="el-icon-caret-right"></i></div>
      </div>

      <!-- 右边按钮 -->
      <div class="right">
        <i class="el-icon-mic"></i>
        <i class="el-icon-mic"></i>
        <i class="el-icon-mic"></i>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    mapState
  } from "vuex"
  import {
    formatTime
  } from "@/common/common"
  export default {
    name: "Buttom",
    data() {
      return {
        sliceLength: 50,
        data1: true
      }
    },
    computed: {
      ...mapState(["playPlace", "playdestily"])
    },
    filters: {
      format: function (val) {
        let a = formatTime(val)
        return a
      }
    },
    methods: {
      formatTooltip(val) {

        return val / 100;
      },
      playend() {
        console.log(this.$refs.abc);
        console.log(this.$refs.abc);
        console.log(this.$refs.abc);
        let a = this.$refs.abc
        a.pause()
        this.data1 = false
      },
      playstart() {
        let a = this.$refs.abc
        a.play()
        this.data1 = true
      }
    }
  }
</script>

<style lang="less">
  .buttom {
    width: 100%;
    height: 80px;
    background-color: skyblue;
    // display: flex;
    // justify-content: space-around;
    position: relative;

    .top {
      width: 100%;
      height: 20px;

      .slice {
        position: absolute;
        top: -20px;
        width: 100%;
        height: 20px;
      }

    }

    .bott {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .left {
        display: flex;

        // justify-content:flex-start;
        img {
          width: 46px;
        }

        .sinng {
          margin-left: 10px;
        }
      }

      .content {
        display: flex;

        .div {
          font-size: 40px;
        }
      }
    }
  }
</style>